<template>
  <div ref="main_body" class="dashboard">
    <div class="main">
      <el-button
        style="position: relative; z-index: 111"
        type="primary"
        size="small"
        @click="toggleFullScreen"
      >
        全屏
      </el-button>
      <div ref="table" class="table" />
    </div>

    <canvasBg />
  </div>
</template>

<script>
import echarts from 'echarts'
import canvasBg from '@/views/dashboard/components/CanvasBg.vue'
import screenfull from 'screenfull'
export default {
  name: 'Dashboard',
  components: {
    canvasBg
  },
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {
    this.columnInit()
  },
  methods: {
    columnInit() {
      var myChart = echarts.init(this.$refs.table)
      var xAxisData = []
      var data1 = []
      var data2 = []
      for (var i = 0; i < 100; i++) {
        xAxisData.push('类目' + i)
        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5)
      }

      var option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        legend: {
          data: ['涨幅', ' 2020年', '2021年'],
          textStyle: {
            color: '#fff'
          },
          itemGap: 5
        },
        grid: {
          color: '#fff',
          top: '12%',
          left: '1%',
          right: '10%',
          containLabel: true
        },
        xAxis: [
          {
            color: '#fff',
            type: 'category',
            data: data1
          }
        ],
        yAxis: [
          {
            color: '#fff',
            type: 'value',
            name: 'Budget (million USD)',
            axisLabel: {
              formatter: function (a) {
                a = +a
                return isFinite(a) ? echarts.format.addCommas(+a / 1000) : ''
              }
            }
          }
        ],
        dataZoom: [
          {
            show: true,
            start: 94,
            end: 100
          },
          {
            type: 'inside',
            start: 94,
            end: 100
          },
          {
            show: true,
            yAxisIndex: 0,
            filterMode: 'empty',
            width: 30,
            height: '80%',
            showDataShadow: false,
            left: '93%'
          }
        ],
        series: [
          {
            name: 'Budget 2011',
            type: 'bar',
            data: data1
          },
          {
            name: 'Budget 2012',
            type: 'bar',
            data: data2
          }
        ]
      }

      myChart.setOption(option)
    },
    // 切换全屏
    toggleFullScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.main_body)
      } else {
        // Ignore or do something else
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  position: relative;
  margin: -30px 0 0 -30px;
  width: calc(100% + 60px);
  background-color: #fff;
  .main {
    .table {
      position: relative;
      width: 600px;
      color: #fff;
      z-index: 99;
      height: 300px;
      margin: 0 auto;
    }
  }
}
</style>
